<%--
  Created by IntelliJ IDEA.
  User: xiaoji
  Date: 2015/1/5
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="/WEB-INF/lib/spring.tld"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<%@ taglib prefix="z" uri="/WEB-INF/lib/zerdoor.tld"%>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<html>
<head>
    <title><spring:message code='raceIndex.title.msg' /></title>
    <link href="${path}/style/acg/css/style.css" rel="stylesheet" type="text/css" />
    <script src="${path}/js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="${path}/style/acg/js/jquery.jslides.js"></script>
    <style type="text/css">
        #slides {display:block;width:100%;height:440px;position:relative}
        #slides li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute}
        #slides li img{ width:100%; height:100%;}
        #slides li a { display:block; width:100%; height:100%;}
        #pagination {position:absolute; width:900px; height:22px;z-index:10;right:34px;bottom:30px; text-align:right; font-weight:bold;}
        #pagination span {display: inline-block;width:22px; height:22px; line-height:22px; overflow:hidden;margin:0 6px;cursor:pointer; text-align:center;font-family:Tahoma;/*border-radius: 50%;*/ background:#FFF;color:#3f3f3f;}
        #pagination span.current {background:#f0be32;}
    </style>
    <script type="text/javascript">
        function replaceAll(str){
            var arr = str.split(",");
            var result="";
            for(var i=0;i<arr.length;i++){
                if(i == arr.length-1){
                    result += arr[i];
                }else{
                    result += arr[i]+"<br/>";
                }
            }
            return result;
        }
        function NewDate(str) {
            str = str.split(' ');
            str1 = str[0].split('-');
            str2 = str[1].split(':');
            var date = new Date();
            date.setUTCFullYear(str1[0], str1[1] - 1, str1[2]);
            date.setUTCHours(str2[0], str2[1], str2[2], 0);
            return date;
        }
        function getRTime(NowTime,EndTime,obj){
            var timmer;
            var EndTime= new Date(EndTime); //截止时间
            var NowTime = new Date(NowTime);
            var t =EndTime.getTime() - NowTime.getTime();

            var d=Math.floor(t/1000/60/60/24);
            var h=Math.floor(t/1000/60/60%24);
            var m=Math.floor(t/1000/60%60);
            var s=Math.floor(t/1000%60);

            $("#"+obj).html("<spring:message code="home.module2.stay"/>："+d + "<spring:message code='raceIndex.message.msg1' />"+h + "<spring:message code='raceIndex.message.msg2' />"+m + "<spring:message code='raceIndex.message.msg3' />"+s + "<spring:message code='raceIndex.message.msg4' />");
            //setInterval(getRTime(NowTime,EndTime,obj),1000);
            NowTime = new Date(NowTime.getTime()+1000);
            setTimeout(function() {
                getRTime(NowTime,EndTime,obj);
            }, 1000)
        }

        function getRaceByClass(id){
            $("div.Contestlist ul li ").each(function(){
                if(id !=0 ){
                    if($(this).attr("firstClass") == id){
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                }else{
                    $(this).show();
                }

            });
            $("div.contesttab ul li").each(function(){
                if($(this).hasClass("hover")){
                    $(this).removeClass("hover");
                }
            });
            $("#tab"+id).addClass("hover");
        }

    </script>
</head>
<body>
<jsp:include page="../public/header.jsp"></jsp:include>
<!--content-->
<div id="container">
    <div class="wrapper">
        <div class="rewardad" style="width: 1250px;height:450px;position:relative;">
            <ul id="slides">
                <c:set var="SPEED" value="5000"></c:set>
                <c:forEach var="ad" items="${adverts}">
                    <c:if test="${ad.advGroup == 127102}"></c:if>
                    <li><a href="${ad.url}" title="${ad.title}" ><img src="/acgplat/${ad.imgurl}"  width="1250" height="450"/></a></li>
                    <c:set var="SPEED" value="${ad._interval*1000}"></c:set>
                </c:forEach>
                <script>
                    var SPEED='${SPEED}';
                </script>
            </ul>
        </div>
        <div class="rewardmain">
            <div class="contesttab">
                <ul class="clearfix">
                    <li id="tab0" class="hover" onclick="getRaceByClass(0)"><a href="javascript:void(0);" ><spring:message code='raceIndex.message.msg5' /></a></li>
                    <c:forEach items="${gointGroup}" var="g">
                        <li id="tab${g.firstClass}" onclick="getRaceByClass(${g.firstClass})"><a href="javascript:void(0);" >${g.name}</a></li>
                    </c:forEach>
                </ul>
            </div>
            <div class="Contestlist">
                <ul class="clearfix">
                    <c:forEach items="${goingRace}" var="r" varStatus="k">
                    <li firstClass="${r.firstClass}" >
                        <a href="${path}/racedetail/index.html?raceId=${r.race_id}"><img src="${path}/${r.task_pic}" width="292" height="180"></a>
                        <h3><a href="">${r.title}</a></h3>
                        <div class="time" id="race${k.index}"><spring:message code='raceIndex.message.msg6' /><script> getRTime(NewDate("${r.startTime}"),NewDate("${r.endTime}"),"race${k.index}")</script></div>
                        <div class="txt">
                            <script>document.write(replaceAll("${r.name}"))</script>
                        </div>
                        <div class="read"><a href="${path}/racedetail/index.html?raceId=${r.race_id}"><spring:message code='raceIndex.message.msg7' /></a></div>
                    </li>
                    </c:forEach>
                </ul>
            </div>
        </div>

        <c:forEach var="ad" items="${adverts}">
        <c:if test="${ad.advGroup == 127103}">
        <div class="rewardad">
            <a href="javascript:void(0);">
            <img src="/acgplat/${ad.imgurl}" width="1250" height="322"></a>
        </div>
        </c:if>
        </c:forEach>

        <div class="contestover">
            <h2><spring:message code='raceIndex.message.msg8' /></h2>
            <div class="contest_overlist">
                <ul class="clearfix">
                    <c:forEach var="r" items="${finishGroup}" varStatus="k">
                    <li <c:if test="${(k.index+1)%4==0}">class="nomr"</c:if>>
                        <a href="${path}/racedetail/index.html?raceId=${r.race_id}"><img src="${path}/${r.task_pic}" width="292" height="180"></a>
                        <h3><a href="${path}/racedetail/index.html?raceId=${r.race_id}">${r.title}</a></h3>
                        <a href="${path}/racedetail/index.html?raceId=${r.race_id}" class="look"><spring:message code='raceIndex.message.msg9' /></a>
                    </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--content-->
<jsp:include page="../public/footer.jsp"></jsp:include>
</body>
</html>
